import { defineComponent, ref, onMounted, type PropType } from 'vue'
import { NTreeSelect, type TreeSelectOption } from 'naive-ui'
import { useCategoryApi } from '@/api/CategoryApi.ts'
import type { Category } from '@/type/CategoryType.ts'
import PeaceTreeSelect from '@/infrastructure/PeaceDataTable/component/business/PeaceTreeSelect/index.tsx'

export interface TreeSelectorProps {
  value?: string | number | Array<string | number>
  multiple?: boolean
  placeholder?: string
}

export default defineComponent({
  name: 'CategoryTreeSelector',
  components: { PeaceTreeSelect },
  props: {
    value: {
      type: [String, Number, Array] as PropType<string | number | Array<string | number>>,
      default: undefined
    },
    multiple: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请选择分类'
    }
  },
  emits: ['update:value'],
  setup(props, { emit }) {
    const categoryApi = useCategoryApi()
    return () => (
      <PeaceTreeSelect
        keyField = "id"
        labelField = "name"
        childrenField = "child"
        api={categoryApi.treeCategory}
        apiParam={{"fixedParam":"固定参数222"}}
        value={props.value}
        multiple={props.multiple}
        clearable
        placeholder={props.placeholder}
        onUpdateValue={(value) => emit('update:value', value)}
        style={{
          width: '200px'
        }}
      />
    )
  }
})
